import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { Button, message } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';
import { CommonTable } from 'components';
import UrgePersonModal from './UrgePersonModal/UrgePersonModal';
import { OrderEndDistributeAction } from './index';
import SearchList from './SearchList/SearchList';


class OverdueOrderDistribute extends Component {
    columns = [
        { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
        { title: '姓名', dataIndex: 'userTrueName', key: 'userTrueName' },
        { title: '手机号', dataIndex: 'userPhone', key: 'userPhone' },
        { title: '借款金额', dataIndex: 'lendMoney', key: 'lendMoney' },
        { title: '展期次数', dataIndex: 'lengNum', key: 'lengNum' },
        {
            title: '到期时间',
            dataIndex: 'cutoffTime',
            key: 'cutoffTime',
            render(text) {
                return moment(Number(text)*1000).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        { title: '催收组', dataIndex: 'departmentName', key: 'departmentName' }
    ]
    constructor(props) {
        super(props);
        this.state = {};
        //存储搜索参数
        this.searchPrams = {};
    }
    //选择订单
    onSelectChange = (selectedRowKeys) => {
        const { changeSelectKeys } = this.props;
        changeSelectKeys(selectedRowKeys);
    }
    //点击分配订单
    distribution = () => {
        const { selectKeys } = this.props;
        const { changeModalVisible, personData } = this.props;
        //是否有选中订单
        const isSelected = selectKeys.length > 0;
        if(!isSelected) {
            message.warn('请先选择订单');
            return;
        }
        if (personData.length === 0) {
            message.warn('暂无催收人');
            return;
        }
        //打开催收人弹框
        changeModalVisible(true);
    }
    //关闭催收人弹框
    onModalCancel = () => {
        const { changeModalVisible } = this.props;
        changeModalVisible(false);
    }
    //点击弹框确定按钮,分配订单
    onModalOk = (obj) => {
        const { selectKeys } = this.props;
        const { distribution, getTableData, personType } = this.props;
        let key = personType === 'group' ? 'departmentId' : 'collectorId';
        //todo 分配订单回调？
        distribution({ disIds: selectKeys.join(','), [key]: obj['person'] }, () => {
            getTableData({ pageSize: 10, pageNum: 1, collectorId: 0, ...this.searchPrams });
        });
    }
    //搜索
    handleSearch = (obj) => {
        const { getTableData } = this.props;
        // const time = obj['time'];
        // const isArr = Array.isArray(time) && time.length > 0;
        const params = {
            // startTime: isArr ? time[0].format('YYYY-MM-DD HH:mm:ss') : '',
            // endTime: isArr ? time[1].format('YYYY-MM-DD HH:mm:ss') : '',
            userPhone: obj['userPhone']
        };
        this.searchPrams = params;
        getTableData({ ...params, collectorId: 0 });
    }
    //分页
    handlePageChange = (info) => {
        const { current, pageSize } = info;
        const { getTableData } = this.props;
        getTableData({ collectorId: 0, pageNum: current, pageSize, ...this.searchPrams });
    }

    componentDidMount() {
        const { getTableData, getPersonData } = this.props;
        getTableData({ collectorId: 0, pageSize: 10, pageNum: 1  });
        getPersonData({ roleId: 8 });
    }
    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({ data: [], pagination: {} });
    }
    render() {
        const {
            tableData: { data, pagination },
            loading,
            visible,
            personData,
            selectKeys
        } = this.props;
        const rowSelection = {
            selectedRowKeys: selectKeys,
            onChange: this.onSelectChange
        };
        return (
            <div>
                <SearchList handleSearch={this.handleSearch}/>
                <div><Button type={'primary'} onClick={this.distribution}>分配订单</Button></div>
                <CommonTable
                    rowSelection={rowSelection}
                    columns={this.columns}
                    handlePageChange={this.handlePageChange}
                    dataSource={data}
                    pagination={pagination}
                    loading={loading}
                />
                <UrgePersonModal
                    onModalCancel={this.onModalCancel}
                    onModalOk={this.onModalOk}
                    urgePerson={personData}
                    visible={visible}
                />
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    const { oderEndManageState: { orderEndDistributeState } } = state;
    return {
        tableData: orderEndDistributeState['data'],
        loading: orderEndDistributeState['loading'],
        visible: orderEndDistributeState['visible'],
        personData: orderEndDistributeState['personData'],
        selectKeys: orderEndDistributeState['selectKeys'],
        personType: orderEndDistributeState['personType']
    };
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: OrderEndDistributeAction.oodeGetTableData,
        setTableData: OrderEndDistributeAction.oodeSetTableData,
        getPersonData: OrderEndDistributeAction.oodeGetPersonData,
        changeModalVisible: OrderEndDistributeAction.oodeChangeModalVisible,
        distribution: OrderEndDistributeAction.oodeDistributeOrder,
        changeSelectKeys: OrderEndDistributeAction.oodeChangeSelectKey
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(OverdueOrderDistribute);